import React, { useState, useEffect, useCallback } from 'react'
import { useHistory } from 'react-router-dom'
import { getSofBillingOverview, postSofBillingOverview } from '../../api'
import { ReceiptTypeObj } from '../../../../assets/enum'
import SelectModule from './Components/SelectModule'
import BillListModule from './Components/BillListModule'
import { ActualMoneyAll } from './style'
import { PageHeader, Col, Statistic, Row, Table, Space, Button, message } from 'antd';

/**
 * @description: 应收实收列表页面
 * @author: xiaoxujs
 * @updata: xiaoxujs（2021-08-02）修改搜索的收费科目 
 */

const ActualMoney = () => {
    const history = useHistory()
    const [listData, setListData] = useState([])
    const [overViewData, setOverViewData] = useState({})
    const [total, setTotal] = useState(0)
    const [currentPage, setCurrentPage] = useState(1)
    const [size, setSize] = useState(10)
    const [loading, setLoading] = useState(false)
    const [selectData, setSelectData] = useState({})
    const [billListShow, setBillListShow] = useState(false)
    const [clickId, setClickId] = useState(undefined)
    const overViewFun = useCallback(
        () => {
            ; (async () => {
                const { code, msg, data } = await getSofBillingOverview()
                if (code === '20000') {
                    setOverViewData(data)
                } else {
                    message.error(msg)
                }
            })()
        },
        [],
    )
    const listFun = useCallback(
        (parames = {
            currentPage: 1,
            size: 10
        }) => {
            ; (async () => {
                const { code, msg, data } = await postSofBillingOverview(parames)
                if (code === '20000') {
                    setListData(data.records)
                    setTotal(data.total)
                    setCurrentPage(parames.currentPage)
                    setSize(parames.size)
                    setLoading(false)
                } else {
                    message.error(msg)
                }
            })()
        },
        [],
    )
    useEffect(() => {
        overViewFun()
        listFun()
    }, [overViewFun, listFun])
    // 搜索
    const handleSelect = (values) => {
        values.currentPage = 1
        values.size = 10
        setSelectData(values)
        listFun(values)

    }
    //分页
    const pagination = {
        //是否可以改变pagesize//
        showSizeChanger: true,
        //是否可以快速跳转到某页
        showQuickJumper: true,
        //展示一共有多少条数据//
        showTotal: () => `共${total}条`,
        //每页条数
        pageSize: size,
        //当前页数
        current: currentPage,
        //数据总数
        total: total,
        //pageSize 变化的回调
        onShowSizeChange: (current, pageSize) => changePageSize(pageSize, current),
        //页码改变的回调，参数是改变后的页码及每页条数
        onChange: (current) => changePage(current),
    }
    //改变每页条数
    const changePageSize = (pageSizeFun, current) => {
        const page = {
            currentPage: current,
            size: pageSizeFun
        }
        const parames = Object.assign(selectData, page)
        listFun(parames);
    }
    //改变页数
    const changePage = (current) => {
        const page = {
            currentPage: current,
            size
        }
        const parames = Object.assign(selectData, page)
        listFun(parames);
    }
    //登记到账
    const handleRegisterMoney = (data) => {
        history.push({ pathname: '/registerMoney', state: data })
    }
    //账单
    const handleBillListModule = id => {
        setClickId(id)
        setBillListShow(true)
    }
    const columns = [
        {
            title: '客户名称',
            dataIndex: 'clientName'
        },
        {
            title: '合同编号',
            dataIndex: 'conNo'
        },
        {
            title: '收费科目',
            dataIndex: 'item',
            render: text => <span>{ReceiptTypeObj[text]}</span>
        },
        {
            title: '出账日期',
            dataIndex: 'enterDate'
        },
        {
            title: '应收金额',
            dataIndex: 'ribAccounts'
        },
        {
            title: '实收金额',
            dataIndex: 'actAccounts'
        },
        {
            title: '操作',
            render: (text, recode) => <Space>
                <Button type='primary' onClick={() => handleRegisterMoney(recode)} >登记到账</Button>
                <Button type='primary' onClick={() => handleBillListModule(recode.id)} >开票信息</Button>
            </Space>
        }
    ];
    return <ActualMoneyAll>
        <PageHeader
            className="site-page-header"
            title="应收/实收"
        />
        <SelectModule listFun={listFun} handleSelect={handleSelect} />
        <Row gutter={16} className='data-show'>
            <Col span={4}>
                <Statistic title="合同" value={overViewData.contractTotal} />
            </Col>
            <Col span={5}>
                <Statistic title="应收(CNY)" value={overViewData.receivable} />
            </Col>
            <Col span={5}>
                <Statistic title="未出账单" value={overViewData.notOut} />
            </Col>
            <Col span={5}>
                <Statistic title="实收" value={overViewData.paid} />
            </Col>
            <Col span={5}>
                <Statistic title="收缴率" value={overViewData.confiscate} />
            </Col>
        </Row>
        <Table dataSource={listData} columns={columns} pagination={pagination} rowKey='id' loading={loading} />
        <BillListModule
            billListShow={billListShow}
            setBillListShow={setBillListShow}
            setClickId = {setClickId}
            clickId = {clickId}
        />
    </ActualMoneyAll>
}

export default ActualMoney;